<template>
  <common-header />
  <div class="account-container">
    <el-affix :offset="20">
      <el-aside>
        <client-only>
          <div class="user-info">
            <el-avatar :size="80" :src="userInfo?.userHead" :alt="userInfo?.nickname" />
            <span class="nickname">{{ userInfo?.nickname }}</span>
          </div>
          <el-menu :default-active="defaultActive">
            <nuxt-link v-for="(item, index) in menuList" :key="index" :to="{ name: item.name }">
              <el-menu-item :index="item.name"> <img :src="item.icon" class="img-icon" alt="" /> {{ item.title }} </el-menu-item>
            </nuxt-link>
          </el-menu>
        </client-only>
      </el-aside>
    </el-affix>
    <el-main>
      <div class="account-main">
        <slot />
      </div>
    </el-main>
  </div>
</template>
<script setup>
  import order from 'assets/svg/account/order.svg'
  import user from 'assets/svg/account/user.svg'
  import exam from 'assets/svg/exam.svg'

  import { indexApi } from '~/api'
  import { userApi } from '~/api/user'
  import { getStorage, setStorage } from '~/utils/storage'

  const userInfo = ref({})
  onMounted(async () => {
    userInfo.value = getStorage('UserInfo')
    if (!userInfo.value) {
      userInfo.value = await userApi.getUserInfo()
      setStorage('UserInfo', userInfo.value, 1)
    }
  })

  const { data } = await useAsyncData('website', async () => {
    return indexApi.websiteInfo()
  })
  useHead({
    link: [{ rel: 'icon', type: 'image/x-icon', href: data.value?.websiteIcon }],
    title: '用户中心' + (data.value?.websiteName ? ' - ' + data.value?.websiteName : '')
  })

  const route = useRoute()
  const defaultActive = ref(route.name)

  const menuList = [
    {
      name: 'account-exam',
      icon: exam,
      title: '我的考试'
    },
    {
      name: 'account-order',
      icon: order,
      title: '我的订单'
    },
    {
      name: 'account-user',
      icon: user,
      title: '个人信息'
    }
  ]
</script>
<style lang="scss" scoped>
  .account-container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    border-radius: 15px;
    .el-aside {
      width: 200px;
      margin: 20px 0;
      height: calc(100vh - 119px);

      border-radius: 10px 0 0 10px;
      .user-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        padding: 10px;
        border-bottom: 1px solid var(--el-border-color);
        border-right: 1px solid var(--el-border-color);
        .nickname {
          font-size: 14px;
          line-height: 30px;
          color: #777;
        }
      }
      ul {
        padding: 10px;
        min-height: calc(100vh - 250px);
        li {
          margin: 10px;
        }
        .is-active {
          //background: #eee;
          border-radius: 5px;
          color: blueviolet;
        }
      }
      .img-icon {
        width: 20px;
        margin-right: 5px;
      }
    }
    .account-main {
      flex: 1;
      padding: 20px 20px 0;
      background: #fff;
      height: calc(100vh - 140px);
      border-radius: 0 10px 10px 0;
    }
    :deep(.el-main) {
      margin: 20px auto;
      padding: 0;
    }
  }
</style>
